import { defineStore } from 'pinia';
import { getToken, removeToken, setToken } from '../utils/token-utils';
// import type { UserInfoState } from './interface';
import {ElMessage} from 'element-plus'
import {allAsyncRoutes, anyRoute, staticRoutes} from '@/router/routes'
import userinfoApi,{type userinfoModel} from '@/api/userinfo';
import type { RouteRecordRaw } from "vue-router";
import router from '@/router';
import { cloneDeep } from 'lodash'

// 定义获取用户需要展示的动态路由的函数
const filterRoutesHandler = (routes:RouteRecordRaw[],routesName:string[])=>{
  let result = routes.filter(route=>{
    // 若存在子级路由需要进行递归将子级路由也进行匹配
    if (route.children) {
      // 由于原来的children存储的地址信息被覆盖，那只会存储筛选出的新的地址，原先的地址信息不存在，导致访问品牌管理等页面空白
      route.children = filterRoutesHandler(route.children,routesName)
    }
    return routesName.includes(route.name as string)
  })
  return result
}

// 动态路由需要动态的进行注册
const addRoutes = (addRoutes:RouteRecordRaw[])=>{
  addRoutes.forEach(route=>{
    router.addRoute(route)
  })
}

// 原先定义的不太符合我们的数据样式，这里重新自己定义
interface UserInfoState {
    token: string,
    userinfo:userinfoModel,
    menuRoutes: RouteRecordRaw[] // 用于生成导航菜单的路由列表
}

// 初始化用户信息的函数
const initUserInfo = ():userinfoModel=>({
    avatar:'',
    buttons:[],
    name:'',
    roles:[],
    routes: []
})

/**
 * 用户信息
 * @methods setUserInfos 设置用户信息
 */
export const useUserInfoStore = defineStore('userInfo', {

	state: (): UserInfoState => ({
    token: getToken() as string,
    userinfo:initUserInfo(),
    menuRoutes: []
  }),

	actions: {
    async login (username: string, password: string) {
      try {
        let result = await userinfoApi.login({username,password})
        // console.log('登陆时返回的数据',result);  // token
        // 将获取到的token存储到store中
        this.token = result.token

        // 将token存储到 localStorage 中
        setToken(result.token)
        
      } catch (error) {
        ElMessage.error('用户名或密码错误!')
        return Promise.reject(error)
      }
    },

    async getInfo () {
      try {
        let result = await userinfoApi.getInfo()
        // console.log(result);  // 获取到数据，为数据定义接口
        this.userinfo = result
        // 筛选出某个用户需要展示的路由数组
        // 为了防止覆盖原有的地址被覆盖，在进行调用此筛选函数的时候，使用(深拷贝) cloneDeep 
        const filterRoutes = filterRoutesHandler(cloneDeep(allAsyncRoutes),result.routes)
        this.menuRoutes = staticRoutes.concat(filterRoutes,anyRoute)

        // 动态路由注册
        addRoutes(filterRoutes)
        
      } catch (error) {
        ElMessage.error('获取用户信息失败，请重试')
        return Promise.reject(error)
      }
    },

    

    async logout(){
      try {
        /**
         * 发现bug
         * 当 admin 用户点击一个 zhangsan 用户不存在的路由，然后直接退出登录，
         * 接着用户 zhangsan 再去登录 会直接在控制台报错
         * 
         * 是因为在退出登录后跳转到登录页面的时候，携带了上一步 admin 最后访问的那个 zhansan 用户不存在的路由
         * 
         * 处理方式，进入 Navbar.vue ,将退出登录的方法的跳转到登录页所携带的参数去掉
         */
        await userinfoApi.logout()
        this.reset()
      } catch (error) {
        ElMessage.error('退出登录失败，请重试')
        return Promise.reject(error)
      }
    },
    // 重置的函数
    reset(){
       // 删除local中保存的token
       removeToken()
       // 提交重置用户信息的mutation
       this.token = ''
       this.userinfo = initUserInfo()
    }

    // login (username: string, password: string) {
    //   return new Promise((resolve, reject) => {
    //     setTimeout(() => {
    //       if (username==='admin' && password==='111111') {
    //         const token = 'token-atguigu'
    //         setToken(token)
    //         this.token = token
    //         resolve(token)
    //       } else {
    //         reject(new Error('用户名或密码错误!'))
    //         ElMessage.error('用户名或密码错误!')
    //       }
    //     }, 1000)
    //   })
    // },

    // getInfo () {
    //   return new Promise((resolve, reject) => {
    //     setTimeout(() => {
    //       this.name = 'admin'
    //       this.avatar = 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif'
    //       this.menuRoutes = staticRoutes
    //       resolve({name: this.name, avatar: this.avatar, token: this.token})
    //     }, 1000)
    //   })
    // },

    // reset () {
    //   // 删除local中保存的token
    //   removeToken()
    //   // 提交重置用户信息的mutation
    //   this.token = ''
    //   // this.name = ''
    //   // this.avatar = ''
    // },
	},
});
